<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
            text-decoration: none;
            list-style: none;
        }
        h1 h2{
            font-weight: bold;
        }
        h3{
            font-style: italic;
        }
        form input:required:focus{
            border: 1px solid blue;
        }
        form ::placeholder{
            color: gray;
        }
       
        .active:hover{
        background-color: gray;
        right: 2px;
        }
        nav ul li a:hover{

            color: white;
            right: 2px;
        }
        .container form label:focus{

            border-color: green;
        }
        .container form label:hover{
            background-color: lightblue;


        }

    </style>
</head>
<body>
    <div class="main">
        <section id="intro">
          <h1>Welcome</h1>
          <p>This is the introduction section.</p>
        </section>
        <article class="post">
          <h2>Post Title</h2>
          <p>Post content...</p>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
          </ul>
        </article>
        <aside class="sidebar">
          <h3>Sidebar Title</h3>
          <p>Sidebar content...</p>
        </aside>
      </div>
      <!-- **************************************** -->
      <form>
        <input type="text" name="username" required placeholder="Username">
        <input type="email" name="email" required placeholder="Email">
        <input type="submit" value="Submit">
      </form>
      <!-- **************************************** -->
      <nav>
          <li><a href="#home" class="active">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
      <!-- **************************************** -->
      <h2 class="special-title">Special Title</h2>
      <!-- **************************************** -->
      <ul class="list">
        <li>Item 1
          <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
          </ul>
        </li>
        <li>Item 2
          <ul>
            <li>Subitem 3</li>
            <li>Subitem 4</li>
          </ul>
        </li>
      </ul>
    <!-- **************************************** -->
 <div class="container">
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <button type="submit">Submit</button>
  </form>
</div>
</html>